<template>
  <div>
    <!-- Axios 基于promise的HTTP库 -->
    <swiper
      :modules="modules"
      :loop="true"
      :pagination="swiper_options.pagination"
      :autoplay="swiper_options.autoplay"
      class="swiper"
    >
      <swiper-slide
        v-for="(item, index, key) in adver"
        :key="key"
        v-if="adver.length !== 0 && adver[0].pic"
        @click="go_url(item.url)"
      >
        <!-- 为什么要把src改为:src 因为循环后的数据，是存放在变量中 -->
        <img :src="item.pic" alt="" style="max-height: 274px" />
      </swiper-slide>
    </swiper>
    <!-- 列表  -->
    <div class="Popular_ul" style="margin-top: 10px">
      <div class="ul clr">
        <div class="li" v-for="(item, index, key) in lists" :key="key">
          <router-link :to="`/goods_details?id=${item.id}`">
            <img style="width: 100%; height: 300rpx" :src="item.img_s" />
            <div class="Popular_bom">
              <div class="p">{{ item.title }}</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 作业：练习课上代码 -->
    <!-- 作业：完成首页的跳转 -->
    <!-- 作业：安装axios，并且写出公用文件 -->
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

import SwiperCore, { Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
SwiperCore.use([Autoplay, Pagination]);

import { Index } from "../../network/index.js";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const swiper_options = new reactive({
      pagination: {
        clickable: true,
      },
      autoplay: {
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 2000, //2秒切换一次
        pauseOnMouseEnter: true,
      },
      speed: 500, //切换过渡速度
    });

    const data = reactive({
      adver: [],
      lists: [],
    });

    const go_url = (url) => {
      const router = useRouter();
      router.push(url);
    };

    Index().then((e) => {
      console.log(e);
      data.adver = e.ad;
      data.lists = e.lists;
    });

    // 尽量不要多次请求接口，浪费流量
    Index().then((e) => {
      data.adver = e;
    });
    return {
      swiper_options,
      ...toRefs(data),
      go_url,
    };
  },
};
</script>
<style scoped>
.swiper {
  margin: 0 0.1rem;
}
.swiper .swiper-wrapper {
  /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  height: 1.5rem;
  border-radius: 0.1rem;
}
.swiper .swiper-wrapper img {
  height: 100%;
  width: 100%;
  border-radius: 0.1rem;
}
.swiper {
  --swiper-pagination-color: #fff;
  --swiper-navigation-color: black;
}
.Popular_ul {
  padding: 10rpx;
}
.Popular_ul .li {
  float: left;
}
.Popular_ul .li .p {
  font-size: 16px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.Popular_ul .li {
  width: 48%;
  margin-right: 4%;
  background: #ffffff;
  margin-bottom: 3%;
}
.Popular_ul .li .Popular_bom {
  padding: 5px 5%;
}
.Popular_ul .li:nth-child(2n) {
  margin-right: 0px;
}
.Popular_ul .li .on {
  color: #06c1ae;
  font-size: 14px;
}
.Popular_bom .clr {
  line-height: 18px;
  margin-top: 5px;
}
</style>
